:host .month-picker {
  margin: 20px 0;
  display: inline-block;
  width: 100%; }

:host .month-packer-item {
  width: 25%;
  box-sizing: border-box;
  float: left;
  height: 50px;
  padding: 5px; }
  :host .month-packer-item button {
    border-radius: 32px;
    width: 100%;
    height: 100%;
    font-size: 1em;
    background-color: transparent; }

:host .month-picker.primary .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-primary); }

:host .month-picker.primary .month-packer-item.active button {
  background-color: var(--ion-color-primary);
  color: #fff; }

:host .month-picker.secondary .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-secondary); }

:host .month-picker.secondary .month-packer-item.active button {
  background-color: var(--ion-color-secondary);
  color: #fff; }

:host .month-picker.danger .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-danger); }

:host .month-picker.danger .month-packer-item.active button {
  background-color: var(--ion-color-danger);
  color: #fff; }

:host .month-picker.dark .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-dark); }

:host .month-picker.dark .month-packer-item.active button {
  background-color: var(--ion-color-dark);
  color: #fff; }

:host .month-picker.light .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-light); }

:host .month-picker.light .month-packer-item.active button {
  background-color: var(--ion-color-light);
  color: #9e9e9e; }

:host .month-picker.transparent {
  background-color: transparent; }
  :host .month-picker.transparent .month-packer-item.this-month button {
    border: 1px solid var(--ion-color-light); }
  :host .month-picker.transparent .month-packer-item.active button {
    background-color: var(--ion-color-light);
    color: #9e9e9e; }

:host .month-picker.cal-color .month-packer-item.this-month button {
  border: 1px solid; }

:host .month-picker.cal-color .month-packer-item.active button {
  color: #fff; }
